<template>
	<div class="pageSetting">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:toolbar-config="toolbarConfig"
			:pager-config="pageConfig"
			:edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
			@page-change="pageChange"
		>
			<template #toolbar_buttons>
				<el-input
					v-model="query"
					placeholder="请输入编号、名称或拼音码"
					size="small"
					style="width: 300px"
					clearable
					@keyup.enter.native="handlerSearch"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="handlerSearch"
					/>
				</el-input>
				<el-button type="primary" size="small" @click="handlerAddClick">
					新增
				</el-button>
			</template>
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerEditRow(row)">
					编辑
				</el-button>
				<el-button type="text" size="small" @click="handlerDelRow(row)">
					删除
				</el-button>
			</template>
			<template #valueEdit="{ row }">
				<el-switch
					v-model="row.value"
					active-color="#13ce66"
					inactive-color="#ff4949"
					active-value="0"
					inactive-value="1"
					@change="valueSwitchEdit(row)"
				></el-switch>
			</template>
		</shyt-table>
		<personalityConfigure
			ref="personalityConfigure"
			:visible.sync="personalityConfigureVisible"
			:title="personalityConfigureTitle"
			:personality-configure-data.sync="personalityConfigureData"
			:personality-configure-dialog-type="personalityConfigureType"
			@submit="handlerSubmit"
		/>
	</div>
</template>

<script>
import {
	personalityConfigureInsert,
	personalityConfigureUpdate,
	personalityConfigureDelete,
	getPersonalityConfigurePageList,
} from '@/http/personalityConfigure'
import { getOrgList } from '@/http/org'
import personalityConfigure from './components/personalityConfigure'
export default {
	name: 'PersonalityConfigure',
	components: {
		personalityConfigure,
	},
	data() {
		return {
			query: '',
			personalityConfigureVisible: false,
			orgList: [],
			personalityConfigureTitle: '',
			personalityConfigureType: '',
			page: 1,
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 100,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
			columns: [
				{
					field: 'code',
					title: '编码',
				},
				{
					field: 'name',
					title: '名称',
				},
				{
					field: 'value',
					title: '配置',
					slots: { default: 'valueEdit' },
				},
				{
					field: 'remarks',
					title: '备注',
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			],
			tableData: [],
			$table: null,
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			personalityConfigureData: {},
		}
	},
	computed: {},
	watch: {},
	created() {
		this.getOrgList({})
	},
	mounted() {
		this.handlerSearch()
		this.$table = this.$refs.shytTable.$refs.xTable
	},
	methods: {
		orgListFun(orgUuid) {
			let value = '-'
			if (this.orgList && this.orgList.length > 0) {
				let orgObj = this.orgList.find(info => info.id == orgUuid)
				value = orgObj ? orgObj.orgName : '-'
			}
			return value
		},
		getOrgList(param) {
			getOrgList(param).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.orgList = data.data
				}
			})
		},
		handlerSearch() {
			this.pageConfig.currentPage = 1
			let param = {
				paramNameOrInputCode: this.query.toLowerCase(),
				pageNum: 1,
				pageSize: this.pageConfig.pageSize,
			}
			this.getPersonalityConfigurePageList(param)
		},
		// 翻页事件
		pageChange({ currentPage, pageSize }) {
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
			this.getPersonalityConfigurePageList({
				paramNameOrInputCode: this.query.toLowerCase(),
				pageNum: this.pageConfig.currentPage,
				pageSize: this.pageConfig.pageSize,
			})
		},
		getPersonalityConfigurePageList(param) {
			getPersonalityConfigurePageList(param).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.tableData = data.data.records
					this.pageConfig.total = data.data.total
				}
			})
		},
		handlerSubmit(formData, type) {
			let res = { ...formData }
			if (type == '1') {
				personalityConfigureInsert(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('新增成功')
						this.personalityConfigureVisible = false
						this.getPersonalityConfigurePageList({
							paramNameOrInputCode: this.query.toLowerCase(),
							pageNum: this.pageConfig.currentPage,
							pageSize: this.pageConfig.pageSize,
						})
					}
				})
			} else {
				personalityConfigureUpdate(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('编辑成功')
						this.personalityConfigureVisible = false
						this.getPersonalityConfigurePageList({
							paramNameOrInputCode: this.query.toLowerCase(),
							pageNum: this.pageConfig.currentPage,
							pageSize: this.pageConfig.pageSize,
						})
					}
				})
			}
		},
		valueSwitchEdit(row) {
			personalityConfigureUpdate(row).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.$message.success('配置成功')
				}
			})
		},
		handlerAddClick() {
			this.personalityConfigureTitle = '新增配置'
			this.personalityConfigureType = '1'
			this.personalityConfigureVisible = true
			this.personalityConfigureData = {
				name: '',
				code: '',
				value: '0',
				remarks: '',
			}
		},
		handlerEditRow(row) {
			this.personalityConfigureTitle = '编辑配置'
			this.personalityConfigureType = '2'
			this.personalityConfigureData = {
				name: row.name,
				code: row.code,
				value: row.value,
				remarks: row.remarks,
				orgUuid: row.orgUuid,
				id: row.id,
			}
			this.personalityConfigureVisible = true
		},
		handlerDelRow(row) {
			this.$confirm('此操作将删除该配置, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					personalityConfigureDelete({ id: row.id }).then(({ data }) => {
						if (data?.head?.code == 200) {
							this.$message.success('删除成功')
							this.getPersonalityConfigurePageList({
								paramNameOrInputCode: this.query.toLowerCase(),
								pageNum: this.pageConfig.currentPage,
								pageSize: this.pageConfig.pageSize,
							})
						}
					})
				})
				.catch(() => {})
		},
	},
}
</script>

<style lang="scss" scoped>
.pageSetting {
	padding: 10px;
	box-sizing: border-box;
	height: 100%;
}
</style>
